<template>
  <tooltip v-if="tips !== ''">
    <template slot="title">{{ tips }}</template>
    <avatar :size="avatarSize" :src="src" />
  </tooltip>
  <avatar v-else :size="avatarSize" :src="src" />
</template>

<script>
import Avatar from 'ant-design-vue/es/avatar'
import Tooltip from 'ant-design-vue/es/tooltip'

export default {
    name: 'AvatarItem',
    components: {
        Avatar,
        Tooltip
    },
    props: {
        tips: {
            type: String,
            default: '',
            required: false
        },
        src: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            size: this.$parent.size
        }
    },
    computed: {
        avatarSize() {
            return (this.size !== 'mini' && this.size) || 20
        }
    },
    watch: {
        '$parent.size'(val) {
            this.size = val
        }
    }
}
</script>
